import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtToast, AtButton, AtActionSheet, AtTextarea } from 'taro-ui'
import { DNavBar, DModal, DLookImages } from '@/components'
import classNames from 'classnames'
import './carsourcedetails.scss'
import http from '@/api'
import sdk from '@/common/sdk'
import common from '@/common/'
const countMinPri = common.countMinPri
const itembg = require('../assets/number.png')
const header = require('../assets/header.png')
const right = require('../assets/right.png')
//底部图标
const icon_chat = require('../assets/icon_chat.png')
const icon_favorite = require('../assets/icon_favorite.png')
const icon_phone = require('../assets/icon_phone.png')
const icon_start = require('../assets/start_2.png')
const icon_complaint = require('../../assets/images/icon-complaint@2x.png')
const icon_close = require('../../assets/images/icon-close@2x.png')

export default class CarsourcedetailsBox extends Component {
    constructor(props) {
        super(props),
            this.state = {
                showComplaint: false,
                list: {},
                isShow: false,
                collect: false,
                isToast: false,
                icon: '',
                text: '',
                statusHtml: false,
                type: 'mycar',
                status: '0',
                id: '',
                textHtml: '',
                usercar: {
                    itemStatus: false,
                    itemUrl: ''
                },
                tags: [
                    {
                        text: '试探行情',
                        id: 1
                    },
                    {
                        text: '虚假车源',
                        id: 2
                    },
                    {
                        text: '电话无法接听',
                        id: 3
                    },
                    {
                        text: '要价离谱',
                        id: 4
                    },
                    {
                        text: '其他',
                        id: 5
                    },
                ],
                tagActives: [1]
            }
    }

    componentWillMount() {
        let { id, type = 'mycar', status = '0' } = this.$router.params
        this.setState({
            type,
            status,
            id
        })
        this.getCarSourceDetail({ id: `${id}` })
        this.isCollect()
        // if(type !=='mycar'){

        // }
    }
    //添加我的足迹
    checkIsFootprint(id) {
        http.checkIsFootprint(id).then(res => {
            if (!res) {
                this.getFootprint(id)
            }
        })
    }
    getFootprint(id) {
        http.getFootprint({ mfBussId: id }).then(res => {

        })
    }
    getCarSourceDetail(id) {
        http.getCarSourceDetail(id).then(res => {
            if (!res) {
                return
            }
            let list = res
            let { type } = this.state
            if (res.isDepositGuarantee === '1') {
                type = 'usercar'
                this.checkIsFootprint(id.id)
            }
            this.setState({
                list,
                statusHtml: true,
                type
            })
        })
    }
    //私信
    handleChat() {
        if (window.bridge) {
            const { list } = this.state
            // window.bridge.callHandler('IMChat', { 'tephone': list.creatorContact }, function responseCallback(res) { })
            sdk.setWechatInfo(list.creatorContact, 2, list.carDataModel)
        }
    }
    //电话
    handlePhone() {
        this.setState({
            isShow: true
        })
    }
    handleCancel() {
        this.setState({
            isShow: false
        })
    }

    onHandleClick() {
        let { status, textHtml } = this.state
        if (status === '0') {
            textHtml = '是否确定下架车源'
        } else if (status === '1') {
            textHtml = '是否确定删除车源'
        }
        this.setState({
            isShow: true,
            textHtml
        })
    }


    handleConfirm() {
        const { status, id, type, list } = this.state
        this.setState({
            isShow: false
        }, () => {
            if (status === '0' && type === 'mycar') {
                http.stopMySearchCarTakeOff({ id }).then((res) => {
                    if (res) {
                        Taro.showToast({
                            title: '下架成功',
                            duration: 800
                        }).then(() => {
                            setTimeout(() => {
                                // Taro.navigateBack({
                                //     delta: 1
                                // })
                                Taro.redirectTo({
                                    url: `/pages/usercar/usercar?active=1`
                                })
                            }, 1000)
                        })
                    } else {
                        Taro.showToast({
                            title: '下架失败',
                            duration: 800,
                            icon: 'none'
                        })

                    }
                })
            } else if (status === '1' && type === 'mycar') {
                http.delMySearchCar({ id }).then((res) => {
                    if (res) {
                        Taro.showToast({
                            title: '删除成功',
                            duration: 800
                        }).then(() => {
                            setTimeout(() => {
                                Taro.navigateBack({
                                    delta: 1
                                })
                            }, 1000)
                        })
                    } else {
                        Taro.showToast({
                            title: '删除失败',
                            duration: 800,
                            icon: 'none'
                        })

                    }
                })
            } else if (window.bridge && type !== 'mycar') {
                window.bridge.callHandler('call', { 'tephone': list.creatorContact }, function responseCallback(res) { })
            }
        })
    }

    isCollect() {
        let { id } = this.$router.params
        http.isCollect(id).then(res => {
            this.setState({
                collect: res
            })
        })
    }

    getStatus(status) {
        return status === '1' ? '是' : '否'
    }

    addmyCarCollect(id) {
        let obj = {
            mcBussId: `${id}`,
            mcBussType: 1,
        }
        http.addmyCarCollect(obj)
    }

    delmyCarCollect(id) {
        http.delmyCarCollect([id])
    }

    handleCollect(id) {
        let { collect } = this.state
        if (!collect) {
            this.addmyCarCollect(id)
        }
        if (collect) {
            this.delmyCarCollect(id)
        }
        let icon = collect ? 'star' : 'star-2'
        let text = collect ? '取消收藏' : '已收藏'
        this.setState({
            collect: !collect,
            isToast: true,
            icon,
            text
        })

    }
    onCloseToast() {
        this.setState({
            isToast: false
        })
    }
    handleEarnestform() {
        let { list } = this.state
        Taro.navigateTo({
            url: `/pages/earnestform/earnestform?id=${list.id}`
        })
    }
    //公司跳转
    handleCompany() {
        let { entId } = this.state.list
        Taro.navigateTo({
            url: `/pages/companydetail/companydetail?id=${entId}`
        })
    }

    onHandleLook(url, i, arr = []) {
        if (window.bridge && arr.length > 0) {
            let _images = []
            arr.map(item => {
                _images.push(item.cfUrl)
            })
            window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
        } else {
            this.setState({
                usercar: {
                    ...this.state.usercar,
                    itemStatus: true,
                    itemUrl: url
                }
            })
        }
    }
    onLookHandle() {
        this.setState({
            usercar: {
                ...this.state.usercar,
                itemStatus: false,
                itemUrl: ''
            }
        })
    }
    onOpenComplaint() {
        this.setState({
            showComplaint: true
        })
    }
    onCloseComplaint() {
        this.setState({
            showComplaint: false
        })
    }
    handleTagItem(id) {
        const { tagActives } = this.state
        const index = tagActives.findIndex(item => item == id)
        if (index !== -1) {
            tagActives.splice(index, 1)
        } else {
            tagActives.push(id)
        }
        this.setState({
            tagActives
        })
    }

    render() {
        const {
            list,
            isShow,
            collect,
            isToast,
            icon,
            text,
            statusHtml,
            type,
            status,
            textHtml,
            usercar,
            tags,
            showComplaint,
            tagActives
        } = this.state
        return (
            statusHtml ? <View className='b_carsourcedetails'>
                <DNavBar title='车源详情'></DNavBar>
                <View className='b_carsourcedetails__box'>
                    <View className="b_carsourcedetails__info">
                        <View className="item_title">
                            <View className='item_title__image_box'>
                                <Image src={itembg} className="item_title__image_image"></Image>
                            </View>

                            <Text className="item_title__right_title">{list.carNo}</Text>

                            <Image src={icon_complaint} className="icon_complaint" onClick={this.onOpenComplaint.bind(this)}></Image>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left item_title__left_name">{list.carDataModel || '--'}</Text>
                            <Text className="item_title__right item_title__right_price">{window.toFixed(list.carOfferPrice)}万元</Text>
                        </View>
                        <View className="item_title">
                            <View className='item_title__left item_title__left_min'>
                                <Text className="item_title__left_padding">{list.carSourceType}</Text>
                                <Text className="item_title__left_padding">{list.carEmissionStd}</Text>
                                <Text className="item_title__left_padding">指导价：</Text>
                                <Text className="item_title__left_padding">

                                    {window.toFixed(list.carGuiPrice)}万/
									<Text>{countMinPri(list.carOfferPrice, list.carGuiPrice)}万
									</Text>
                                </Text>
                            </View>
                        </View>
                        <View className="item_title">
                            <View className='item_title__left item_title__left_time'>
                                <Text className="item_title__left_padding">{list.createTime}</Text>
                                {/* <Text className="item_title__left_padding">09:00</Text> */}
                                <Text className="item_title__left_padding">有效期：{list.carSourceValidity}天</Text>
                            </View>
                        </View>
                        <View className='b_carsourcedetails___carinfo'>
                            <View className="item_title">
                                <Text className="item_title__left">外观颜色</Text>
                                <Text className="item_title__right">{list.carOutColor}</Text>
                            </View>
                            <View className="item_title">
                                <Text className="item_title__left">内饰颜色</Text>
                                <Text className="item_title__right">{list.carInColor}</Text>
                            </View>
                            <View className="item_title item_title__footer">
                                <View className="item_title__left">车辆照片</View>
                                <View className='item_title__right'>
                                    {list.fileList && list.fileList.map((item, i) => {
                                        return <Image src={item.cfUrl} className='item_title__right_image' onClick={this.onHandleLook.bind(this, item.cfUrl, i, list.fileList)}></Image>
                                    })}
                                </View>
                            </View>
                        </View>

                    </View>
                    <View className="b_carsourcedetails__info b_carsourcedetails__other">
                        <Text className='b_carsourcedetails__info_title '>其他信息</Text>
                        <View className="item_title">
                            <Text className="item_title__left">车源地点</Text>
                            <Text className="item_title__right">{list.carSourceAddr}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">手续</Text>
                            <Text className="item_title__right">{list.carSourceProc}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">车源性质</Text>
                            <Text className="item_title__right">{list.carSourceAtt}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">是否已购店内保险</Text>
                            <Text className="item_title__right">{this.getStatus(list.carIsPurchaseInsurance)}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">是否可以店内按揭</Text>
                            <Text className="item_title__right">{this.getStatus(list.carIsMortgage)}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">货期</Text>
                            <Text className="item_title__right">{list.carSourcePt}</Text>
                        </View>
                        <View className="item_title">
                            <Text className="item_title__left">备注</Text>
                            <Text className="item_title__right">{list.carRemark || '(空)'}</Text>
                        </View>
                    </View>
                    {
                        type !== 'mycar' && <View className=" b_carsourcedetails__carinfo" onClick={this.handleCompany.bind(this)}>
                            <View className="item_title">
                                <View className='item_title__left'>
                                    <View className='item_title__left_box'>
                                        <Image src={header} className="item_title__left_image"></Image>
                                    </View>

                                </View>
                                <View className='item_title__center'>
                                    <Text className='item_title__center_company'>{list.entName}</Text>
                                    <View className='item_title__center_position'>
                                        <Text className='item_title__center_padding'>{list.entDis}</Text>
                                    </View>
                                    <View className='item_title__center_phone'>
                                        <Text className='item_title__center_padding'>联系方式：</Text>
                                        {/*<Text className='item_title__center_padding'>{list.creator || '--'}</Text>*/}
                                        <Text className='item_title__center_padding'>{list.creatorContact} </Text>
                                    </View>
                                </View>
                                <View className='item_title__right'>
                                    <Image src={right} className="item_title__right_icon"></Image>
                                </View>
                            </View>
                        </View>
                    }

                    {
                        type === 'mycar' && <AtButton onClick={this.onHandleClick.bind(this)} className={classNames('item_btn', status === '1' ? 'item_btn__default' : '')}>{status === '0' ? '下架车源' : '删除车源'}</AtButton>
                    }

                </View>
                {
                    type !== 'mycar' && <View className='b_carsourcedetails__footer'>
                        <View className='b_carsourcedetails__footer_left'>
                            {
                              false && <View className='b_carsourcedetails__footer_item' onClick={this.handleChat.bind(this)}>
                                <Image src={icon_chat} className='b_carsourcedetails__footer_item_image'></Image>
                                <Text>私信</Text>
                            </View>
                            }
                            <View className='b_carsourcedetails__footer_item' onClick={this.handlePhone.bind(this)}>
                                <Image src={icon_phone} className='b_carsourcedetails__footer_item_image'></Image>
                                <Text>电话</Text>
                            </View>
                            {!collect &&
                                <View className='b_carsourcedetails__footer_item' onClick={this.handleCollect.bind(this, list.id)}>
                                    <Image src={icon_favorite} className='b_carsourcedetails__footer_item_image'></Image>
                                    <Text>收藏</Text>
                                </View>
                            }
                            {collect &&
                                <View className='b_carsourcedetails__footer_item' onClick={this.handleCollect.bind(this, list.id)}>
                                    <Image src={icon_start} className='b_carsourcedetails__footer_item_image'></Image>
                                    <Text>已收藏</Text>
                                </View>
                            }

                        </View>
                        <View className='b_carsourcedetails__footer_right' onClick={this.handleEarnestform.bind(this)}>
                            <Text>发起订金担保</Text>
                        </View>
                    </View>
                }
                <DLookImages status={usercar.itemStatus} url={usercar.itemUrl} onLookHandle={this.onLookHandle.bind(this)}></DLookImages>

                <DModal
                    isShow={isShow}
                    title='提示'
                    text={textHtml || `确认拨打${list.creatorContact.substr(0, 3) + '-' + list.creatorContact.substr(3, 4) + '-' + list.creatorContact.substr(7, 4)}吗`}
                    onFirst={this.handleCancel.bind(this)}
                    onLast={this.handleConfirm.bind(this)}
                    onCancel={this.handleCancel.bind(this)}
                >
                </DModal>
                <AtToast isOpened={isToast} text={text} icon={icon} duration='800' onClose={this.onCloseToast.bind(this)}></AtToast>

                <AtActionSheet className="action_sheet" isOpened={showComplaint}>
                    <View className="header">
                        <View className="title">投诉</View>
                        <Image src={icon_close} onClick={this.onCloseComplaint.bind(this)}></Image>
                    </View>
                    <View className="content">
                        <View className="tip">请选择投诉原因后进行提交～</View>
                        <View className="tags">
                            {
                                tags.map((item) => (
                                    <View className={['tag', tagActives.includes(item.id) ? 'active' : ''].join(' ')} onClick={this.handleTagItem.bind(this, item.id)}>{item.text}</View>
                                ))
                            }
                        </View>
                        <AtTextarea maxLength={120} placeholder="请输入投诉内容"></AtTextarea>

                        <AtButton className="submit" onClick={this.onCloseComplaint.bind(this)}>提交</AtButton>
                    </View>
                </AtActionSheet>
            </View> : ''
        )
    }
}
